<template>
  <div>
    <van-nav-bar left-arrow @click-left="$router.back()" title="搜索中心" ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <!--
      https://youzan.github.io/vant/#/zh-CN/search
      input: 当输入内容变化是，它会触发
      clearable: 只在移动端生效
      @input是由van-search组件提供
     -->
    <form action="/">
        <van-search
           v-model.trim="keyword"
           show-action
           placeholder="请输入搜索关键词"
           @input="hGetSuggestion_with_jie_liu"
        >
          <!-- <template #action>
            <div @click="onSearch">搜索</div>
          </template> -->
          <div slot="action" @click="hSearch">搜索</div>
        </van-search>
    </form>
    <!-- 2.搜索建议 -->
    <van-cell-group v-if="keyword">
      <van-cell
       v-for="(item, idx) in cSuggestList"
       :key="idx"
       icon="search"
       @click="hSearchSuggestion(idx)">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- 3. 历史记录 -->
      <van-cell-group v-else>
      <van-cell title="历史记录"/>
      <van-cell
      v-for="(item, idx) in history"
      :key="idx"
      :title="item"
      @click="hClickHistory(item)"
      >
        <van-icon name="close" @click.stop="hDeleteSearchHistory(idx)"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// import _ from 'lodash'
import { setItem, getItem } from '@/utils/storage'
import { getSuggestion } from '@/api/search.js'
export default {
  name: 'Search',
  data () {
    return {
      // 当前的搜索建议
      suggestList: [],
      // 搜索关键字
      keyword: '',
      // 保存历史记录
      history: getItem('searchHistory') || []
    }
  },
  computed: {
    cSuggestList () {
      // 对suggestList的内容进行字符串替换
      // (1) suggestList是数组，进行循环。
      // (2) 对其中的每一项，通过 keyword 匹配到替换的内容，用 string.replace(正则，函数)做替换
      //  正则
      const reg = new RegExp(this.keyword, 'gi')
      // 数组
      const res = this.suggestList.map(suggest => {
        return suggest.replace(reg, function (val) {
          return `<span style="color:red">${val}</span>`
        })
      })
      return res
    }
  },
  methods: {
    // 用户点击了删除历史记录
    hDeleteSearchHistory (idx) {
      this.history.splice(idx, 1)
      // 做持久化
      setItem('searchHistory', this.history)
    },
    // 添加搜索记录的第2种方式：用户点击了搜索按钮
    hSearch () {
      if (this.keyword === '') {
        return
      }
      this.addHistory(this.keyword)
      // 携带参数跳到搜索结果页
      // this.$router.push('/search/result?a=1&b=2&keyword=' + this.keyword)
      this.$router.push('/search/result?keyword=' + this.keyword)
    },
    // 添加搜索记录的第一种方式：用户嗲家了搜索建议 hSearchSuggestion
    hSearchSuggestion (idx) {
      this.addHistory(this.suggestList[idx])
      // 跳转
      // this.$router.push({
      //   path: '/search/result',
      //   query: {
      //     keyword: this.suggestList[idx]
      //   }
      // })
      this.$router.push('/search/result?keyword=' + this.suggestList[idx])
    },
    // 用来向搜索记录中添加新项
    // 搜索记录的基本规则 -不能有重复的项  -最近搜索记录应该放在最前面 addHistory
    addHistory (item) {
      const idx = this.history.findIndex(history => history === item)
      // 如果不等于-1就删除
      if (idx !== -1) {
        this.history.splice(idx, 1)
      }
      // 添加在头部
      this.history.unshift(item)
      // 做持久化
      setItem('searchHistory', this.history)
    },
    // 节流
    hGetSuggestion_with_jie_liu () {
      console.log('当前用户的输入', this.keyword, (new Date()).toLocaleTimeString())
      // 以节流3s为例： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔5秒
      // 是：执行，否：不执行

      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hGetSuggestion()
      }, 100) //  3 * 1000
    },
    hClickHistory (item) {
      this.$router.push('/search/result?keyword=' + item)
    },
    // 搜索内容
    async hGetSuggestion () {
      // 1.如果内容不能为空，则要发请求
      if (this.keyword === '') {
        this.suggestList = []
        return
      }
      const res = await getSuggestion(this.keyword)
      this.suggestList = res.data.data.options
      console.log('搜索qqqq', res)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.van-nav-bar .van-icon{
  color:#fff
}
</style>
